Title: Interactive Content an Introduction to H5P

Let's learn to create Interactive content Using H5P

In this Module you will get introduced to various H5P Content types.

 There is a self check page too!

This is an example of H5P Interactive Book.

Interactive Content an Introduction to H5P

H5P an Introduction

Interactive Content Creation Using H5P

sushumnarao@gmail.com / info@justwrite.in

[Image: CC BY]

Credits: by Open Clipart (Author); source https://pixabay.com/vectors/information-librarian-library-logo-160948/; licence PD

[Image: What and Why Interactivity]

Interactivity...What and Why?

Welcome

What?

“Interactivity is not simply a function of computer-based transactions, but a fundamental success factor for teaching and learning, especially when implemented in an online context. In most cases, regardless of any virtual community that exists, the learner will be working independently and therefore the effectiveness of those communications (interactions) will ultimately determine the effectiveness and efficiency of the learning environment.” − (Sims, Dobbs & Hand, 2001, p. 514).

Feedback

Feedback is valuable when it is received, understood and acted on. How students analyse, discuss and act on feedback is as important as the quality of the feedback itself (Nicol, 2010).

- Inform students how they achieved grade
- Guide students to improve their performance
- Motivate them
- Develop their capability to evaluate and regulate their own learning (Nicol, 2010)
- Identify and reward specific qualities in their work

Why?

- Promote active learning ​
- Active participation​
- Learners’ activity can be tracked : viewing time / attempts etc.​
- To provide an opportunity to comment / communicate on a topic​

How?

Credits: by Sushumna Rao (Author); licence CC0 1.0

[Image: Free, Rich, Reusable Interactive Content]

Free & Open Source

Create, Share, Reuse, Modify​

What is H5P?

Credits: by H5P.org (Author)

[Image: An authoring tool to create Interactive Content Easily create, share and reuse HTML5 Content (responsive content)]

Interactivity:- The involvement of users in the exchange of information with computers and the degree to which this happens - Cambridge Dictionary Definition

What kind of Content types we can create?

Credits: by h5p.org (Author)

[Image: H5P Content types - Games Drag and Drops Interactive Presentations Interactive Videos ...the list is huge As many as 40 varities of Content types we can create]

Various Content types we can create using H5P

[Image: H5P Content types - Games Drag and Drops Interactive Presentations Interactive Videos ...the list is huge As many as 40 varities of Content types we can create]

As many as 40 content types

[Image: H5P Content types - Games Drag and Drops Interactive Presentations Interactive Videos ...the list is huge As many as 40 varities of Content types we can create]

H5P content types

[Image: H5P Content types - Games Drag and Drops Interactive Presentations Interactive Videos ...the list is huge As many as 40 varities of Content types we can create]

How can we distribute? / share?

- ​​​​​​H5P.COM - SaaS solution​
- In LMS or in CMS​
  - Canvas
  - Blackboard
  - Brightspace
  - Moodle
  - WordPress
  - Drupal

- It needs a Web browser
- A website with H5P plugin

*H5P.org is for testing purposes only. You should not use it to host "real" content.

?

Is there any application that we can use to author H5P content types?

- You can create with an application called Lumi and distribute as an HTML file or SCORM package.

Or

- Register in https://h5pcatalogue.in/ and create interactive OER and share.

Yes!

How to Download Lumi?

Lumi Interface and creating Content

H5P example-1

Credits: by Sushumnarao (Author); licence CC BY 4.0

[Image: H5P Course Presentation example]

Credits: by Sushumna (Author); licence CC BY 4.0

[Image: H5P MCQ in Course presentation]

H5P example-2

[Image: H5P Drag and Drop]

H5P example-3

[Image: H5P Dialog cards]

H5P Attempts Tracking

[Image: H5P Dialog cards]

H5P Attempts Tracking - Lumi

[Image: H5P Dialog cards]

Reusing H5P

[Image: H5P Reusing, click on Reuse and download the file to reuse]

Attribute

[Image: H5P Dialog cards]

Before you create...

- Think about purpose of Interactivity
  - Motivation
  - Self-check (Formative assessment)
    - Provide Constructive Feedback
    - Give an option to redo
    - Show Solution

* Make sure you create accessible content

[Image: learn unlearn relearn]

Alvin Toffler is credited with saying: “The illiterate of the 21st century will not be those who cannot read and write, but those who cannot learn, unlearn, and relearn.”

Sushumna Rao T

www.justwrite.in

sushumnarao@gmail.com

@sushumnarao

https://e-ology.blogspot.com

https://h5pcatalogue.in/

1.2 H5P Content types

H5P Content types

Timeline

Timeline

Using Timeline content type, a sequence of events can be presented in chronological order. For each event images and texts can be added. Visit Authors tutorial from H5p.org.

Accordion

Accordion

The Accordion content type allows to add accessible accordions to the sites. This content type is fully responsive. The content inside Accordion is shown in collapsible panels with a title. Each panel expands by clicking on the title.

Visit authors tutorial from h5p.org.

Agamotto

Agamotto

Agamotto allows to present a sequence of images that are supposed to look sequentially. By adding text descriptions to each image, they may reveal more details.

Visit authors tutorial from h5p.org.

Collage

Collage

Collage allows to present images in a variety of compositions. There are several composition layouts to pick from.

Visit authors tutorial from h5p.org.

Chart

Chart

Chart allows to present simple statistical data graphically. Data elements of the chart can be in varied colours.

Visit authors tutorial from h5p.org.

Dialog-cards

Dialog-cards

Dialog-cards allows to present a set of cards with corresponding words or expressions on either side of the cards.

For example words/ formulas can be presented in text. format with corresponding visual and audio and when the cards are turned the correct answer to the formula / word pronunciation / meaning can be seen.

Visit authors tutorial from h5p.org.

Image slider

Image slider

Image slider allows to present images in an appealing way. Images appear in a carousel with navigational arrows on each side.

Visit authors tutorial from h5p.org.

Arithmetic quiz

Arithmetic quiz

Arithmetic quiz allows to present questions on Basic Arithmetic Operations or in Linear Equations. While creating the number of questions and the type can be chosen while the Questions are generated automatically.

Visit authors tutorial from h5p.org.

Advanced-fill-in-the-blanks

Advanced-fill-in-the-blanks

Advanced-fill-in-the-blanks allows to present fill in the blanks tasks with advanced feedback.

This content type is different from "Fill in the blanks" content type.

Here feedback for a specific incorrect answer can be provided and can also offer answers for users to choose from a dropdown.

Visit authors tutorial from h5p.org.

True or False Question

True or False Question

True or False Question content type:

As the name suggests True or False questions can be created. Here there is another great option provided is to rename the "True" and "False" labels. This can be done under "Text overrides and translations" settings.

Visit authors tutorial from h5p.org.

Documentation tool

Documentation tool

The Documentation tool allows to present a form wizard with document output at the final step of the wizard. Here user can download the document that is created with the inputs from the form wizard.

Visit authors tutorial from h5p.org.

Essay

Essay

Essay question content type allows to present an essay question with an input box for the user to place text.

The text which users have created will be scanned for keywords that have been defined beforehand while creating the content type.

Visit authors tutorial from h5p.org.

Fill in the blanks

Fill-in-the-blanks

Fill-in-the-blanks allows to present fill in the blanks tasks. Portions of words or sentences are removed from a text and the learner is asked to replace the missing text.

Visit authors tutorial from h5p.org.

Guess the answer

Guess the answer

Advanced-fill-in-the-blanks allows to present image questions where the user should guess the answer based on the image. A correct answer to the question asked is presented below the image as a bar. By pressing the bar below the image, the correct answer is revealed.

** In this content type, the user does not input anything.

Visit authors tutorial from h5p.org.

Multiple choice

Multiple Choice

Multiple choice question content type allows to present a multiple choice quiz to the user.

Immediate feedback can be given on users performance.

Multiple Choice questions can have a single or multiple correct options per question.

Visit authors tutorial from h5p.org.

Questionnaire

Questionnaire

Questionnaire content type allows to present a Questionnaire to recieve feedback.

Questionnaires can be used as surveys or open ended questions. (multiple choice questions or text input questions can be used)

Main features of this content type are:

- Create multiple choice or open ended questions
- Require specific questions to be answered
- Change the display text and show an image upon completion
- Set the accessibility messages for screen readers

** To use this content type in the Moodle platform, LRS dependent content types under H5P Settings need to be enabled.

** LMS administrators help is required to use this content type.

Single Choice Set

Single Choice Set

The Single Choice Set content type allows to create question sets with one correct answer per question. The user can get immediate feedback after submitting each answer.

Visit authors tutorial from h5p.org.

Summary

Summary content type

Summary content type allows learners to interactively build a summary of a certain topic.

A user is presented with a set of statements from where she/he need to choose the correct statement each time the content is presented.

Visit authors tutorial from h5p.org.

Virtual tour (360)

Virtual tour

Virtual Tour (360) content type allows allows to present multiple 360 environments using only a web browser. Where questions, text, and interactions can be added.

360 (equirectangular) images are required to create a real Virtual tour experience.

**This tool is not limited to 360 images, It can also be used to navigate through static image scenes.

Visit authors tutorial from h5p.org.

Find the word

Find the word

Find the word content type allows to present a task to find the words in a given grid.

Flash Cards

Flash Cards

Flash Cards content type allows to present a set of cards containing a picture on one side of the cardwith a task to user to type a word or expression corresponding to the picture and an (corresponding text to that image) answer on the other side.

User need to input text then can turn the card to know the answer.

Visit authors tutorial from h5p.org.

Find the hotspot

Find the hotspot

Find the hotspot content type allows to present an image based test where the user is to find the correct spot on an image. An immediate feedback can be shown with a retry option.

Memory Game

Memory Game

Memory Game content type allows to present a memory game with images and optional text/audio to them.

While users playing the game, they search for image pairs.

A specified text message can also be displayed when a matching pair is found.

Visit authors tutorial from h5p.org.

Find Multiple Hotspots

Find Multiple Hotspots

Find Multiple Hotspots content type allows to create an image based task where the user is to find the correct spots on an image.

While creating this task number of hotspots the user need to find to complete the task can be decided.

Hotspots can either be defined as correct or incorrect, and appropriate feedback can be provided for both the cases.

A feedback can also be defined if the end user presses somewhere which is neither defined as a correct nor incorrect hotspot.

Drag and Drop

Drag and Drop

Drag and Drop content type allows to present a task to user to drag a piece of text or an image and drop it on one or more corresponding dropzones.

This content type can be used to create a task:

- To group elements that have something in common
- To match an object with another object
- To put elements in the correct order or in correct position
- To label a diagram / parts of an object / organ

Visit authors tutorial from h5p.org.

Drag the text

Drag the text/ words

Drag the text/words content type allows to present text based tasks where users are to drag words into blanks in sentences.

One can add as many expressions and missing pieces of text as they like. And a hint may be added to each missing piece of text.

Visit authors tutorial from h5p.org.

Image hotspots

Image Hotspots

Image Hotspot content type allows to present an image with multiple hotspots. Hotspots may reveal texts, images and videos when clicked.

Visit authors tutorial from h5p.org.

Image Pairing

Image pairing

Image pairing content type allows to present a task that requires users to match pairs of images.

These pairs can be of same image or images having a relation with each other or a question asked in one image and a solution presented in another image.

Visit authors tutorial from h5p.org.

Image Sequencing

Image Sequencing

Image Sequencing content type allows to present a task that the user needs to order a randomized set of images according to the task description.

Visit authors tutorial from h5p.org.

Mark the words

Mark the words

Mark the words content type allows to present a textual expressions task with a defined set of correct words.

The user need to highlights words according to the task description and get the score. For wrong answers, the user gets negative points.

Visit authors tutorial from h5p.org.

Personality Quiz

Personality Quiz

Personality Quiz content type allows to present task/quiz with series of questions with alternatives, where each alternative is matched against one or more personalities.

At the end of the quiz, the user will see which personality matches the best.

By creating interesting yet creative questions, alternatives, and personalities using images, this quiz can be made visually appealing one.

Column

Mark the words

Column content type allows to present several H5P content items in an organised manner into a one column layout.

Similar topics content types or content types that share a common theme can be grouped together using this content type to create a coherent learning experience.

In Column content type, H5P content items are listed one below each other on one page.

Visit authors tutorial from h5p.org.

Course Presentation

Mark the words

Course Presentation content type allows to present a slide-based presentation of the learning material. Slide titles, links, pictures, audio and video clips (multi media), as well as various quiz types (Interactive content) can be embedded seamlessly right into the presentation for a richer learning experience.

Users swipe through slides to experience the learning material while solving various quizzes or watching videos along the way.

Visit authors tutorial from h5p.org.

Interactive Book

Mark the words

Interactive Book content type allows to present a mix of informational content and tasks. Or it can also be used only with informational content . Eeach page in the book has its own URL allowing to link to a specific page and also making sure that every page is indexed by Google.

Interactive Video

Mark the words

Interactive Video content type allows to present interactions on top of video clips. Interactions such as images, elaborating text, links and quizzes can be added to the video.

This content type is very useful to address differentiated instruction and practice differentiated learning framework.
As in-depth information such as pictures, tables, text and links that the user can interact with during video playback can be added to the clips.
Also, tasks like Multichoice questions, Fill in the blanks, Drag and drop questions and Summaries can be added for the learners to solve at any given time in the video clip.

Visit authors tutorial from h5p.org.

Speak the Word Set

Mark the words

Speak the Word Set content type allows to present multiple Speak the Words tasks into a set so they can be delivered together as a single piece of content, similar to Question Set.
While authoring there are options to customize its behaviour, for example different messages for different scores achieved by the user can be set.

** This content type has limited browser support and currently works only on Chrome.

Speak the Words

Mark the words

Speak the Words content type allows to present a question that should be answered with the user's own voice.

Author can create questions and make the user answer with their own voice.

** The speech engine used is currently only available in the Chrome browser.

Dictation

Mark the words

Dictation content type allows to present audio samples containing a sentence for dictation and enter the correct transcription. Students can listen to the samples and enter what they have heard into a text field. Their answers will be evaluated automatically.

Several options are available that allow to control the exercise's difficulty. Optionally second audio sample for a sentence that could hold a version spoken slowly can be added.

Also limit can be set for how often a sample can be played and if punctuation should be relevant for scoring can be defined.

Also settings for typing errors can be defined(should be counted as no mistake, a full mistake, or just a half mistake)

Visit authors tutorial from h5p.org.

Audio Recorder

Audio Recorder content type allows to record voice and play it back immediately or download a .wav file for future use. Which can be used for open-ended questions and language courses.

Important note: This content type currently has limited browser support. It works on Edge, Chrome and FireFox. We hope more browsers will implement support for the ways this content type does recordings.

Branching Scenario

Branching scenario content type allow to present dilemmas, self paced learning scenarios and other types of adaptive learning.

The content may be video based or based on other H5P content types like:-

- Course Presentation
- Image Hotspots
- Interactive Video

You can view it's sample in H5P.org page.

Crossword

Using this content type we can build and customize a crossword puzzle. We can customize the crossword colors, upload a background image and decide how scoring should work alongwith randomize the words option.  View sample from h5p.org.

Image Choice

This content type allow us to create multiple or single choice questions with images as alternatives. Layout customization option is there for the alternatives and can choose between fixed aspect ratios or to use the aspect ratios of the images.View sample from h5p.org.

Sort the Paragraphs

A task can be created with a randomized list of paragraphs and can ask users to arrange them in correct order.

Users are to sort the paragraphs into the correct order. By default one point for each paragraph that follows the paragraph it is supposed to follow will be allocated but we can decide to award a point for each paragraph that is in the correct place instead.

See the sample from h5p.org

Self Check

Drag and Drop the content types into the correct category.

Credits: by sushumna_rao (Author); licence CC BY-SA 4.0

- Accordion
- Chart
- Image Slider
- Collage
- Intaractive Video
- Course Presentation
Q: Accordion
A: Accordion; Chart; Collage; Image Slider
Q: Intcp
A: Intaractive Video; Course Presentation
Credits: Drag and Drop activity bg; by Sushumna Rao; 2021; licence CC BY 4.0

*You reached to the last page.

**This is the example of Interactive book content type.